<template>
  <div>
    <a-card class="card-header">
      <a-form-model :model="model">
        <a-row :gutter="24">
          <a-col :span="5">
            <a-form-model-item
              label="选择产线"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                :allowClear="true"
                v-model="productLineId"
                placeholder="请选择产线"
                @change="handleChange"
              >
                <a-select-option
                  v-for="(item, index) in Option"
                  :key="index"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="17">
            <a-button
              type="primary"
              style="margin-top:3px"
              @click="handleSearch"
              >查询</a-button
            >
          </a-col>
          <a-col :span="2">
            <a-button type="primary" @click="handleAllList">全部设备</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card v-if="list.length > 0">
      <listSequence :list="list" />
    </a-card>
  </div>
</template>

<script>
import api from "@/api/apiServer";
import listSequence from "./components/listSequence/index.vue";
export default {
  components: { listSequence },
  data() {
    return {
      model: {},
      Option: [],
      labelCol: {
        xl: { span: 8 },
        xxl: { span: 8 },
      },
      wrapperCol: {
        xl: { span: 16 },
        xxl: { span: 16 },
      },
      list: [],
      productLineId: null,
    };
  },
  activated() {
    this.getOption();
    this.getList();
  },
  created() {
    this.getOption();
    this.getList();
  },
  methods: {
    // 获取产线数据源
    async getOption() {
      const params = { pageNumber: 1, pageSize: 999999 };
      const res = await api.ProductLinePage(params);
      this.Option = res.data.data;
    },
    // 获取列表数据
    async getList() {
      const res = await api.ProductLineMonitor({ id: this.productLineId });
      this.list = res.data.data;
    },
    handleChange(value) {
      this.productLineId = value;
    },
    handleAllList() {
      delete this.productLineId;
      this.getList();
    },
    // 查询
    handleSearch() {
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
.card-content {
  button {
    margin-right: 20px;
  }
}
::v-deep .ant-tree-node-content-wrapper {
  width: 90%;
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
</style>
